<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>XXX平台</title>
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <header>
        <div class="c900 flex">
            <a href="./"><h1 style="color: #fdfdfd">XXX平台</h1></a>
            <span class="flex">
                <a><el-avatar src="https://img1.baidu.com/it/u=2068393135,2936134418&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"></el-avatar></a>
                <template v-if="this.user.userinfo">
                    <a href="javaScript:;">{{this.user.name}}</a>
                    <a href="javaScript:;" @click="userDel" style="margin-left: 40px">退出登录</a>
                </template>
                <template v-else>
                    <a href="register.html">注册</a>
                    <a href="login.html">登录</a>
                </template>

            </span>
        </div>
    </header>
    <main class="c900">
        <el-container>
            <el-header style="background-color: transparent">
                <el-form :inline="true" class="demo-form-inline">
                    <el-form-item label="商品名">
                        <el-input v-model="where.name"  placeholder="商品名"></el-input>
                    </el-form-item>
                    <el-form-item label="分类">
                        <el-select v-model="where.type" placeholder="请选择">
                            <el-option
                                    v-for="t in types"
                                    :key="t.type"
                                    :label="t.type"
                                    :value="t.type">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="query">查询</el-button>
                        <el-button type="primary" @click="dialogFormVisible=true;good={ name:'',type:'',price:0 }">添加</el-button>
                    </el-form-item>
                </el-form>
            </el-header>
            <el-main>
                <el-table
                        :data="goods"
                        style="width: 100%">
                    <el-table-column prop="id" label="编号" >
                    </el-table-column>
                    <el-table-column prop="name" label="商品名">
                    </el-table-column>
                    <el-table-column prop="type" label="类型">
                    </el-table-column>
                    <el-table-column prop="nums" label="数量">
                    </el-table-column>
                    <el-table-column prop="price" label="价格">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button @click="del(scope.row.id)" type="text" size="small">删除</el-button>
                            <el-button type="text" size="small" @click="updateUi(scope.row)">修改</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-main>
            <el-footer>
                <el-pagination :page-size="where.pageSize"
                               @current-change="queryPage"
                        background
                        layout="prev, pager, next"
                        :total="total">
                </el-pagination>
            </el-footer>
        </el-container>
    </main>

    <el-dialog title="商品信息" :visible.sync="dialogFormVisible">
        <el-form>
            <el-form-item label="名称" :label-width="formLabelWidth">
                <el-input v-model="good.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="分类" :label-width="formLabelWidth">
                <el-input v-model="good.type" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="价格" :label-width="formLabelWidth">
                <el-input v-model="good.price" type="number" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
        </div>
    </el-dialog>

    <!--修改商品信息-->
    <el-dialog title="修改商品信息" :visible.sync="isUpdata">
        <el-form>
            <el-form-item label="商品名称" :label-width="formLabelWidth">
                <el-input v-model="updateGood.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="商品分类" :label-width="formLabelWidth">
                <el-input v-model="updateGood.type" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="商品数量" :label-width="formLabelWidth">
                <el-input v-model="updateGood.nums" type="number" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="商品价格" :label-width="formLabelWidth">
                <el-input v-model="updateGood.price" type="number" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="isUpdata = false">取 消</el-button>
            <el-button type="primary" @click="saveUpdate">确 定</el-button>
        </div>
    </el-dialog>
</div>
<script>
    var v = new Vue({
        el : "#app",
        data : {
            user: {name:"",userinfo:false},
            goods:[],
            dialogFormVisible:false,
            formLabelWidth:100,
            good:{ name:"",type:"",price:0 },
            types:[],
            where:{name:"",type:"", pageNum:1, pageSize:5},
            total:0,
            isUpdata:false,
            updateGood:{id:0,name:"",type:"",price:0,nums:0},
            dGoods: {},
        },
        created() {
            this.query();
            axios.get("queryTypes").then(res=> {
                this.types = res.data;
                // 在第一个选项前增加一个空选项
                this.types.unshift({type:""});
            });
        },
        methods : {
            query(){
                axios.post("loginInfo").then(res=>{
                    if(res.data.code == 200){
                        this.user.name = res.data.data.name;
                        this.user.userinfo = true;
                    }
                }),
                axios.get("queryGoods", {
                    params: this.where
                }).then(res=>{
                    this.goods = res.data.records;
                    this.total = res.data.total
                });
            },
            queryPage(page){
                this.where.pageNum = page;
                this.query();
            },
            save(){
                let p = new URLSearchParams();
                p.append("name",this.good.name);
                p.append("type",this.good.type);
                p.append("price",this.good.price);
                axios.post("addGood",p).then(res=>{
                    if(res.data.code ==1){
                        this.$message(res.data.msg);
                        // 关闭窗口
                        this.dialogFormVisible = false;
                        this.query();
                    } else {
                        this.$alert(res.data.msg);
                    }
                })
            },
            userDel(){
                axios.post("loginInfoDel").then(res=>{
                    if(res.data.code == 200){
                        this.user.name = "";
                        this.user.userinfo = false;
                    }
                })
            },
            del(id){
                this.$confirm('请确认是否要删除该商品?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.get("delGood?id=" + id).then(res=>{
                        if(res.data.code == 1){
                            this.$message(res.data.msg);
                            this.query();
                        } else {
                            this.$alert(res.data.msg);
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            updateUi(id){
                // console.log(id)
                this.dGoods=id;
                this.updateGood.id=id.id;
                this.updateGood.name=id.name;
                this.updateGood.type=id.type;
                this.updateGood.nums=id.nums;
                this.updateGood.price=id.price;
                this.isUpdata=true;
            },
            saveUpdate(){
                if(this.updateGood.nums==''){
                    this.updateGood.nums=0;
                }

                if(this.updateGood.price==''){
                    this.updateGood.price=0;
                }
                let p=new URLSearchParams();
                p.append("id",this.updateGood.id);
                p.append("name",this.updateGood.name);
                p.append("type",this.updateGood.type);
                p.append("nums",this.updateGood.nums);
                p.append("price",this.updateGood.price);
                axios.post("updateGood",p).then(res=>{
                    if(res.data.code==1){
                        this.$message(res.data.msg);
                        this.dGoods.name=this.updateGood.name;
                        this.dGoods.type=this.updateGood.type;
                        this.dGoods.nums=this.updateGood.nums;
                        this.dGoods.price=this.updateGood.price;
                        this.isUpdata=false;
                    }else{
                        this.$alert(res.data.msg);
                    }
                });
            }
        }
    })
</script>
</body>
</html>

<style>
    html,body,#app{
        height: 100%;
    }
    body{
        margin: 0px;
        padding: 0px;
        background-size: cover;
    }
    a{
        text-decoration: none;
        color: #666
    }
    img{
        width: 100%;
        object-fit: cover;
        border-radius: 5px;
    }
    .c900{
        width: 900px;
        margin-inline: auto;
    }
    .flex{
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
    }
    .grid2{
        display: grid;
        grid-gap: 10px;
        grid-template-columns: auto auto;
    }
    .grid3{
        display: grid;
        grid-template-columns: auto auto auto;
    }
    .grid4{
        display: grid;
        grid-template-columns: auto auto auto auto;
    }
    header{
        background-color: #0f9ae0;
        background-size: cover;
        position: sticky;
        top: 0px;
        z-index: 1;
        height: 60px;
    }
    header h1{
        margin: 10px;
    }
    header span>a{
        margin-left: 20px;
        color: #fff;
    }
    main{
        background-color: #eee;
        min-height: calc(100% - 100px);
        padding: 20px;
    }
</style>